<template>
  <van-grid :border="false" :column-num="3" gutter="10">
    <van-grid-item class="item" @click="router.push('/temperature')">
      <van-image src="temperature.svg" width="48" />
    </van-grid-item>
    <van-grid-item class="item" @click="router.push('/length')">
      <van-image src="length.svg" width="48" />
    </van-grid-item>
    <van-grid-item class="item" @click="router.push('/weight')">
      <van-image src="weight.svg" width="48" />
    </van-grid-item>
    <van-grid-item class="item" @click="router.push('/currency')">
      <van-image src="currency.svg" width="48" />
    </van-grid-item>
    <van-grid-item class="item">
      <van-image src="memo.svg" width="48" />
    </van-grid-item>
  </van-grid>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
</script>

<style scoped>
.item:active {
  transform: scale(0.8);
}
</style>
